<template>
    <div class="home">
        <!-- asdasdas -->
       <home-header></home-header>
       <home-swiper :swiperList="swiperList"></home-swiper>
       <home-icon :iconList="iconList"></home-icon>
       <home-location></home-location>
       <home-activity></home-activity>
       <home-Hot :hotList="hotList"></home-Hot>
       <home-link :linkList="linkList"></home-link>
       <home-vacation :vacationList="vacationList"></home-vacation>
       <!-- 1231123 -->
    </div>
</template>
<script>
import {mapState} from "vuex"
import HomeHeader from './pages/header'
import HomeSwiper from './pages/swiper'
import HomeIcon from './pages/icon'
import HomeLocation from './pages/Location'
import HomeActivity from './pages/activity'
import HomeHot from './pages/Hot'
import HomeLink from './pages/link'
import HomeVacation from './pages/Vacation'
export default {
    components:{
    HomeHeader,
    HomeSwiper,
    HomeIcon,
    HomeLocation,
    HomeActivity,
    HomeHot,
    HomeLink,
    HomeVacation
    },
    data(){
        return{
            swiperList:[],
            hotList:[],
            iconList:[],
            linkList:[],
            vacationList:[],
            changeCity:""
        }
    },
    computed:{
        ...mapState(['city'])
    },
    methods:{
        getHttp(){
             this.$http.get("/api/dataHome.json")
        .then((res)=>{
            // console.log(res.data.data[0].swiperList);
            const data=res.data.data;
            data.forEach((item,index)=>{
                if(item.city==this.city){
                    console.log(item.hotList)
                    this.swiperList=item.swiperList;
                    this.hotList=item.hotList;
                    this.iconList=item.iconList;
                    this.linkList=item.linkList;
                    this.vacationList=item.vacationList;
                }
                
            })
            // this.swiperList=data[0].swiperList;
            // this.hotList=data[0].hotList;
            // this.iconList=data[0].iconList;
            // this.linkList=data[0].linkList;
            // this.vacationList=data[0].vacationList;
        })
        }
    },
    mounted(){
        this.changeCity=this.city
       this.getHttp()
       
    },
    activated(){
        if(this.changeCity!= this.city){
            this.getHttp();
            this.changeCity= this.city;
        }
    }

}
</script>
<style scoped>
.home{
    background: #f5f5f5;
}
</style>